<script setup>
import {reactive} from "vue";
import {infoStore} from "@/store";
import ListContent from "@/components/ListContent.vue";

const props = defineProps(['songList', 'subscribedCount'])
let state = reactive({
    trueList: {},
    subscribedCount: [],
})
state.trueList = props.songList
state.subscribedCount = props.subscribedCount

const store = infoStore()
const {updatePlayListInfo, updatePlayListIndex} = store

function playMusic(index) {
    // 更新播放列表
    updatePlayListInfo(state.trueList)
    // 更新播放曲目
    updatePlayListIndex(index)
}
</script>

<template>
    <div class="musicList">
        <div class="topBar">
            <div class="barLeft">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang1"></use>
                </svg>
                <span class="span1">播放全部<span class="span2">(共{{ state.trueList.length }}首)</span></span>
            </div>
            <!--            <div class="barRight">-->
            <!--                <svg class="icon" aria-hidden="true">-->
            <!--                    <use xlink:href="#icon-jiahao"></use>-->
            <!--                </svg>-->
            <!--                <span>收藏{{state.subscribedCount}}</span>-->
            <!--            </div>-->
            <van-button round type="primary" color="#EC4141">+ 收藏({{ state.subscribedCount }})</van-button>
        </div>
        <!--        <div class="list">-->
        <!--            <div class="item" v-for="(item,i) in state.trueList" :key="item">-->
        <!--                <div class="itemLeft" @click="playMusic(i)">-->
        <!--                    <span class="leftSpan">{{ i + 1 }}</span>-->
        <!--                    <div>-->
        <!--                        <p>{{ item.name }}</p>-->
        <!--                        <span v-for="(author,index) in item.ar">{{ author.name }}-->
        <!--                            <span v-if="index+1>0 && index+1<Object.keys(item.ar).length">/ </span>-->
        <!--                        </span>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="itemRight">-->
        <!--                    <svg v-if="item.mv!==0" aria-hidden="true" class="icon movieIcon">-->
        <!--                        <use xlink:href="#icon-shipin"></use>-->
        <!--                    </svg>-->
        <!--                    <svg aria-hidden="true" class="icon listIcon">-->
        <!--                        <use xlink:href="#icon-31liebiao"></use>-->
        <!--                    </svg>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <ListContent :lists="state.trueList"/>
    </div>

</template>

<style scoped lang="less">
@whiteColor: #F5F5F7;
.musicList {
    width: 100%;
    height: 100%;
    background-color: @whiteColor;
    padding: 0 0.2rem;
    margin-top: 0.2rem;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;

    .topBar {
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .barLeft {
            width: 3.5rem;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .icon {
                stroke: #333;
                stroke-width: 20;
            }

            .span1 {
                font-weight: 550;
                font-size: 0.36rem;
                color: #010813;
                margin-left: 10px;
            }

            .span2 {
                font-weight: 400;
                font-size: 0.24rem;
                color: #999;
            }
        }

        .van-button--primary {
            font-size: 14px;
        }
    }

    .list {
        width: 100%;

        .item {
            width: 100%;
            height: 1.4rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .itemLeft {
                width: 60%;
                height: 100%;
                display: flex;
                align-items: center;

                .leftSpan {
                    display: inline-block;
                    width: 0.2rem;
                    text-align: center;
                }

                div {
                    p {
                        width: 4.54rem;
                        height: 0.4rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-weight: 700;
                    }

                    span {
                        font-weight: 400;
                        font-size: 0.24rem;
                        color: #999;
                    }

                    margin-left: 0.3rem;
                }
            }

            .itemRight {
                width: 20%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;

                .icon {
                    fill: #999;
                }

                .movieIcon {
                    position: absolute;
                    left: 0;
                }

                .listIcon {
                    position: absolute;
                    right: 0;
                }
            }
        }
    }
}
</style>